<ix-fake-progress-bar
  class="loader-bar"
  [loading]="isLoading()"
></ix-fake-progress-bar>

<div class="tree-wrapper" [ixUiSearch]="searchableElements.elements.bootStatus">
  <div class="tree-inner">
    @if (poolInstance && poolInstance.scan) {
      <mat-accordion>
        <mat-expansion-panel class="mat-elevation-z0">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <strong>{{ poolInstance.scan.function }}</strong>
            </mat-panel-title>
          </mat-expansion-panel-header>
          <mat-list>
            <mat-list-item>
              {{ 'Status' | translate }}:
              {{ poolInstance.scan.pause !== null ? 'PAUSED' : poolInstance.scan.state ? poolInstance.scan.state : ('None requested' | translate) }}
            </mat-list-item>
            @if (poolInstance.scan.errors !== null) {
              <mat-list-item>
                {{ 'Errors' | translate }}:
                {{ poolInstance.scan.errors }}
              </mat-list-item>
            }
            @if (poolInstance.scan.start_time?.$date) {
              <mat-list-item>
                {{ 'Date' | translate }}:
                {{ poolInstance.scan.start_time.$date | formatDateTime }}
              </mat-list-item>
            }
          </mat-list>
        </mat-expansion-panel>
      </mat-accordion>
    }

    <div class="tree-header">
      <div class="name-header">
        <span >{{ 'Name' | translate }}</span>
      </div>
      <div>{{ 'Status' | translate }}</div>
      <div>{{ 'Read' | translate }}</div>
      <div>{{ 'Write' | translate }}</div>
      <div>{{ 'Checksum' | translate }}</div>
      <div>{{ 'Errors' | translate }}</div>
    </div>

    <ix-tree-view
      class="tree"
      [ixDataSource]="dataSource"
      [ixTreeControl]="treeControl"
    >
      <ix-tree-node
        *treeNodeDef="let topologyItem; dataSource: dataSource"
        [treeNodeDefDataSource]="dataSource"
      >
        <span class="spacer" treeNodeToggle></span>
        <ix-bootenv-node-item
          [node]="topologyItem"
          [poolInstance]="poolInstance"
          [oneDisk]="oneDisk"
          (invokeAction)="doAction($event)"
        ></ix-bootenv-node-item>
      </ix-tree-node>

      <ix-nested-tree-node
        *treeNodeDef="let topologyItem; dataSource: dataSource; when: hasNestedChild"
        [treeNodeDefDataSource]="dataSource"
      >
        <div class="nested-tree-root-node">
          <button
            mat-icon-button
            treeNodeToggle
            [ixTest]="['toggle-row', topologyItem.guid]"
            [attr.aria-label]="'Toggle {row}' | translate: { row: topologyItem.guid }"
            (click)="$event.preventDefault()"
          >
            @if (treeControl.isExpanded(topologyItem)) {
              <ix-icon name="expand_more"></ix-icon>
            }
            @if (!treeControl.isExpanded(topologyItem)) {
              <ix-icon name="chevron_right"></ix-icon>
            }
          </button>
          <ix-bootenv-node-item
            [node]="topologyItem"
            [poolInstance]="poolInstance"
            [oneDisk]="oneDisk"
            (invokeAction)="doAction($event)"
          ></ix-bootenv-node-item>
        </div>

        @if (treeControl.isExpanded(topologyItem)) {
          <ng-container treeNodeOutlet></ng-container>
        }
      </ix-nested-tree-node>
    </ix-tree-view>
  </div>
</div>
